<template>
  <div class="tab relative clear">
    <div v-if="showArrow"  class="t-arrow">
      <i class="iconfont icon-t-arrow mr10 pointer" @click="moveLeft"></i>
    </div>

    <div class="inline clear tab-com left" :style="{'width': `${80 * max}px`}">
      <div class="clear"
        :style="{'width': `${90 * length}px`, 'margin-left': `${-marginLeft}px`}">
        <div
          class="inline clear left relative pointer"
          :class="{'hover': n === cur}"
          @click="chooseCur(n)"
          v-for="n in length">
          <p class="tab-x" v-if="n === cur && isDel && length !== 1" @click="delCur(n)"><i class="iconfont icon-x"></i></p>
          <p class="tab-title">{{title}}{{n}}</p>
        </div>
      </div>
    </div>

    <div v-if="showArrow" class="r-arrow" :class="{'arrow-right': !add}">
      <i class="iconfont icon-r-arrow mr10 pointer" @click="moveRight"></i>
    </div>
    <i v-if="add" class="iconfont icon-plus pointer" @click="addCur">{{add}}</i>
  </div>
</template>

<script>
  export default {
    name: 'zz-tab',
    data () {
      return {
        length: 1,
        cur: 1,
        showArrow: false,
        marginLeft: 0
      }
    },
    props: {
      title: '',
      add: '',
      max: {
        type: Number,
        default: 8
      },
      isDel: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    watch: {
      list () {
        this.init()
      },
      length (value) {
        if (value > this.max) {
          this.showArrow = true
        } else {
          this.showArrow = false
        }
      }
    },
    methods: {
      init () {
        this.length = this.list.length
        this.$emit('confirm', this.list[0])
      },
      delCur (index) {
        this.$emit('delCur', this.list[index - 1])
        this.$nextTick(() => {
          this.chooseCur(index - 1)
          if (this.length <= this.max) {
            this.marginLeft = 0
          }
        })
      },
      addCur () {
        this.$emit('addCur')
        this.$nextTick(() => {
          this.chooseCur(this.length)
          if (this.length > this.max) {
            this.moveRight()
          }
        })
      },
      chooseCur (index) {
        this.cur = index
        this.$emit('confirm', this.list[index - 1])
      },
      moveLeft () {
        if (this.marginLeft === 0) {
          return
        }
        this.marginLeft -= 90
      },
      moveRight () {
        if (this.marginLeft === (this.length - this.max + 1) * 90) {
          return
        }
        this.marginLeft += 90
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab{
    height: 39px;
    .tab-com{
      overflow-x: hidden;
      >div{
        >div{
          margin-top: 8px;
        }
      }
    }
    >i{
      margin-top: 15px;
      float: left;
    }
    i{
      font-size: 12px;
    }
    .tab-title{
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px #fff solid;
      border-bottom: none;
      box-sizing: border-box;
      @include ellipsis;
    }
    .tab-x{
      position: absolute;
      top: -8px;
      right: -8px;
      background: $red;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      color: #fff;
      line-height: 15px;
      text-align: center;
      cursor: pointer;
      z-index: 2;
    }
    .hover{
      border: 1px $color-line solid;
      border-bottom: none;
      color: $color;
    }
    .t-arrow{
      width: 13px;
      height: 13px;
      position: absolute;
      border-radius: 50%;
      background: #fff;
      top: 16px;
      left: 5px;
      border: 1px $color-line solid;
      text-align: center;
      line-height: 12px;
      z-index: 2;
    }
    .r-arrow{
      width: 13px;
      height: 13px;
      position: absolute;
      border-radius: 50%;
      background: #fff;
      top: 16px;
      right: 85px;
      border: 1px $color-line solid;
      text-align: center;
      line-height: 12px;
      z-index: 2;
    }
    .arrow-right{
      right: 5px;
    }
  }
</style>
